<template>
  <van-count-down
    class="inline-block"
    :time="totalSecond"
    format="HH:mm:ss"
    @finish="onFinish"
    @change="onChange"
  >
    <template #default="timeData">
      <div class="flex items-center">
        <template v-if="simple">
          <div class="text-[#999]">
            <template v-if="formatHours(timeData) > 0">
              <span
                :class="{
                  'text-red': countdown(timeData)
                }"
                >{{ formatTime(formatHours(timeData), true) }}</span
              >
              <span
                :class="{
                  'text-red': countdown(timeData)
                }"
                >:</span
              ></template
            >
            <span
              :class="{
                'text-red': countdown(timeData)
              }"
              >{{ formatTime(timeData.minutes, true) }}</span
            >
            <span
              :class="{
                'text-red': countdown(timeData)
              }"
              >:</span
            >
            <span
              :class="{
                'text-red': countdown(timeData)
              }"
              >{{ formatTime(timeData.seconds, true) }}</span
            >
          </div>
        </template>
        <template v-else>
          <template v-if="formatHours(timeData) > 0">
            <template v-for="hour in formatTime(formatHours(timeData))">
              <span
                class="time-bg"
                :class="{
                  'text-red': countdown(timeData)
                }"
                >{{ hour }}</span
              >
            </template>
            <span
              class="time-colon"
              :class="{
                'text-red': countdown(timeData)
              }"
              >:</span
            >
          </template>
          <template v-for="minute in formatTime(timeData.minutes)">
            <span
              class="time-bg"
              :class="{
                'text-red': countdown(timeData)
              }"
              >{{ minute }}</span
            >
          </template>
          <span
            class="time-colon"
            :class="{
              'text-red': countdown(timeData)
            }"
            >:</span
          >
          <template v-for="second in formatTime(timeData.seconds)">
            <span
              class="time-bg"
              :class="{
                'text-red': countdown(timeData)
              }"
            >
              {{ second }}</span
            >
          </template>
        </template>
      </div>
    </template>
  </van-count-down>
</template>
<script lang="ts" setup>
defineProps({
  totalSecond: {
    type: Number,
    default: 0
  },
  simple: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["finish", "change"]);

const formatHours = (timeData: CurrentTime) => {
  if (timeData.days > 0) {
    return timeData.days * 24 + timeData.hours;
  } else {
    return timeData.hours;
  }
};
const countdown = (timeData: CurrentTime) => {
  if (timeData.days == 0 && timeData.hours == 0 && timeData.minutes == 0) {
    if (timeData.seconds < 10) {
      return true;
    }
  }
  return false;
};
const formatTime = (time: number, flag = false) => {
  if (time < 10) {
    if (flag) {
      return "0" + time;
    } else {
      return [0, time];
    }
  } else {
    if (flag) {
      return time.toString();
    } else {
      return time.toString().split("");
    }
  }
};
const onFinish = () => {
  emit("finish");
};
const onChange = (_time: CurrentTime) => {
  emit("change", _time);
};
</script>
<style lang="scss" scoped>
.time-bg {
  width: 20px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  border-radius: 3px;
  background-color: #dfefff;
  margin: 0 0.5px;
}
.time-colon {
  font-family: PingFang SC;
  width: 10px;
  height: 21px;
  font-weight: bold;
  font-size: 15px;
  color: #111;
  display: flex;
  justify-content: center;
  line-height: 18px;
}
</style>
